<template>
	<view class="refundInfobox" :style="{height: refundHeight+'px'}">
		<view class="refundInfo">
			<!-- 退款中 -->
			<image v-if="refundInfo.status==1" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/mine/tkz@2x.png" mode=""></image>
			<!-- 退款失败 -->
			<image v-if="refundInfo.status==2" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/mine/tksb@2x.png" mode=""></image>
			<!-- 退款成功 -->
			<image v-if="refundInfo.status==0" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/mine/chenggong@2x.png" mode=""></image>
			<view class="price" v-if="refundInfo.status==1">
				退款中 {{refundInfo.money}}元
			</view>
			<view class="price" v-if="refundInfo.status==0">
				退款成功
			</view>
			<view class="price" v-if="refundInfo.status==2">
				退款失败
			</view>
			<!-- 退款中 退款成功 -->
			<view class="refundetail" v-if="refundInfo.status==0||refundInfo.status==1">
				<view class="box d-ai-c d-jc-sb detail-l">
					<view class="">
						申请退款金额
					</view>
					<view class="">
						{{refundInfo.money}}元
					</view>
				</view>
				<view class="box d-ai-c d-jc-sb detail-l">
					<view class="">
						预计到账时间
					</view>
					<view class="" v-if="refundInfo.status==1">
						预计3个工作日内到账
					</view>
					<view class="" v-if="refundInfo.status==0">
						{{refundInfo.updateTime}}
					</view>
				</view>
			</view>
			<!-- 退款失败 -->
			<view class="refundetail box d-ai-c" style="font-size: 30rpx;font-weight: 500;color: #333333;line-height: 40rpx;text-align: center;vertical-align: middle;" v-if="refundInfo.status==2">
				<view class="">
					上门服务前两小时内，由于您申请退款导致违约造成的服务未完成，不予退款。
				</view>
				
			</view>
		</view>
		<view class="orderinfo mt-2">
			<view class="box d-ai-c">
				<view class="box d-ai-c d-header">
					<view class="">
						
					</view>
					<view class="ml-2">
						退款信息
					</view>
				</view>
			</view>
			<view class="orderinfo-each mt-2">
				退款编号：{{refundInfo.refundNo}}
			</view>
			<view class="orderinfo-each mt-1">
				申请时间：{{refundInfo.createTime}}
			</view>
			<view class="orderinfo-each mt-1" v-if="refundInfo.cause==0">
				退款原因：信息填写有误
			</view>
			<view class="orderinfo-each mt-1" v-if="refundInfo.cause==1">
				退款原因：有事去不了
			</view>
			<view class="orderinfo-each mt-1" v-if="refundInfo.cause==3">
				退款原因：重复下单
			</view>
			<view class="orderinfo-each mt-1">
				补充说明：{{refundInfo.remark}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				refundHeight:400,
				refundNo:'',
				refundInfo:'',
			}
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.refundHeight = res.windowHeight - uni.upx2px(60) //windoHeight为窗口高度，主要使用的是这个
				}
			})
		},
		onLoad(option) {
			this.refundNo = option.refundNo
		},
		onShow() {
			this.getrefundInfo()
		},
		methods: {
			getrefundInfo(){
				this.$api.refunddetails({
					refundNo:this.refundNo
				}).then((res) => {
					if(res.data.code=200){
						console.log(res.data.dataMap)
						this.refundInfo = res.data.dataMap
					}
							
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.refundInfobox{
	background: #F2F7FF;
	padding: 30rpx;
}
.refundInfo{
	width: 690rpx;
	height: 452rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	text-align: center;
	.price{
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}
	image{
		margin-top: 40rpx;
		width: 128rpx;
		height: 128rpx;
		background: #FF8338;
		border-radius: 50%;
		
	}
	.refundetail{
		width: 560rpx;
		height: 157rpx;
		background: #FFEFE5;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 36rpx;
		padding: 0 30rpx;
		.detail-l{
			height: 77rpx;
			line-height: 77rpx;
			view:nth-child(1){
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}
			view:nth-child(2){
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}
		}
	}
}
.orderinfo{
	width: 630rpx;
	min-height: 117rpx;
	padding: 30rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	.orderinfo-each{
		font-size: 30rpx;
		font-weight: 500;
		color: #666666;
	}
	.d-header{
		view:nth-child(1){
			width: 8rpx;
			height: 26rpx;
			background: #FF8338;
			border-radius: 4rpx;
		}
		view:nth-child(2){
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
		}
	}
}
</style>
